import React, { Component } from 'react'
import { Menu, Button } from 'antd'
import http from '../../../api/request'
import MyIcon from '../Iconfont/Iconfont'
import { connect } from 'react-redux'
//收缩按钮的图标
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons'
//加载样式
import './Menu.less'
//发送走收缩的条件
import {
  ACTION_CHANGE_MENUCOLSPAN,
  ACTION_CHANGE_ROUTER,
} from '../../../store/actioncreaters'
//路由跳转
import { withRouter } from 'react-router-dom'
const { SubMenu } = Menu

class LeftComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      message: '导航',
      menuList: [],
      collapsed: false,
      defaultSelectedKeys: ['/admin/home'],
      defaultOpenKeys: ['/admin/home'],
      selectedKeys: [],
    }
    this.toggleCollapsed = this.toggleCollapsed.bind(this)
    this.handleClick = this.handleClick.bind(this)
  }
  componentWillMount() {
    this.getMenuList()
    let activeurl = this.props.location.pathname
    console.log('$$$$$$')
    console.log(activeurl)
    this.setState({
      selectedKeys: [activeurl],
    })
  }
  componentWillReceiveProps(nextProps) {
    console.log('执行了吗')
    console.log(nextProps.location.pathname)
    console.log(this.props.location.pathname)
    this.setState({
      selectedKeys: [nextProps.location.pathname],
    })
  }

  render() {
    return (
      <div style={{ width: '100%' }}>
        <Button
          type="primary"
          onClick={this.toggleCollapsed}
          style={{
            margin: '0 auto',
            marginBottom: 16,
            marginTop: 20,
            display: 'block',
          }}
        >
          {React.createElement(
            this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined
          )}
        </Button>
        <Menu
          selectedKeys={this.state.selectedKeys}
          defaultSelectedKeys={this.state.defaultSelectedKeys}
          defaultOpenKeys={this.state.defaultOpenKeys}
          mode="inline"
          inlineCollapsed={this.state.collapsed}
          style={{ width: '100%', background: '#001529', color: '#ccc' }}
          onClick={this.handleClick}
        >
          {this.state.menuList.map((content, index) => {
            if (content.children) {
              return (
                <SubMenu
                  title={content.title}
                  name={content.title}
                  key={content.key}
                  icon={<MyIcon type={content.icon}></MyIcon>}
                >
                  {content.children.map((item, index2) => {
                    return (
                      <Menu.Item
                        key={item.key}
                        name={item.title}
                        icon={<MyIcon type={item.icon}></MyIcon>}
                      >
                        {item.title}
                      </Menu.Item>
                    )
                  })}
                </SubMenu>
              )
            } else {
              return (
                <Menu.Item
                  key={content.key}
                  name={content.title}
                  icon={<MyIcon type={content.icon}></MyIcon>}
                >
                  {content.title}
                </Menu.Item>
              )
            }
          })}
        </Menu>
      </div>
    )
  }
  toggleCollapsed() {
    this.setState(
      {
        collapsed: !this.state.collapsed,
      },
      function () {
        this.props.handleCollapsed(this.state.collapsed)
      }
    )
  }
  getMenuList() {
    let _this = this
    http.get('/api/menu.json').then((res) => {
      _this.setState({
        menuList: res.data,
      })
    })
  }
  //存数组

  handleClick(e) {
    console.log(e)
    console.log(e.item.props.name)
    let name_url = e.item.props.name
    //每次取出来urldata
    let result = JSON.parse(sessionStorage.getItem('urldata')) || [
      { name: '首页', url: '/admin/home' },
    ]
    let url = e.key
    console.log(result)
    let count = 0 //计数器
    result.forEach((item, index) => {
      if (item.url !== url) {
        count++
      }
    })
    if (count === result.length) {
      result.push({ name: name_url, url })
    }
    //改变REDUX
    sessionStorage.setItem('urldata', JSON.stringify(result))
    this.props.handleChange(result)

    this.props.history.push({ pathname: url })
  }
}

const mapStateToProps = (state) => {
  return {
    urldata: state.routerData,
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    handleCollapsed(flag) {
      if (flag) {
        //true 就是收缩
        let value = { left: 1, right: 23 }
        const action_result = ACTION_CHANGE_MENUCOLSPAN(value)
        dispatch(action_result)
      } else {
        //false 就是展开
        let value = { left: 2, right: 22 }
        const action_result = ACTION_CHANGE_MENUCOLSPAN(value)
        dispatch(action_result)
      }
    },
    handleChange(value) {
      const action_result = ACTION_CHANGE_ROUTER(value)
      dispatch(action_result)
    },
  }
}

//最后利用store挂钩

export default connect(
  mapStateToProps, //这里面放的是数据
  mapDispatchToProps //里面放的是操作的数据的方法
)(withRouter(LeftComponent))
